<template>
  <view class="content">
    <view style="flex: 1; height: calc(100vh - 128rpx)">
       <common-scroll-view :loading="loading" :pageNum="pageNum" :pageSize="pageSize" :total="total" :data="dataList"
        @onRefresh="onRefreshBack" @getMore="getMore">
        <up-swipe-action v-for="item in dataList" :key="item.id">
          <common-shop-cart-cell :record="item" @valChange="valChange" @deleteShopCart="deleteShopCart" @selectProduct="selectProduct"></common-shop-cart-cell>
        </up-swipe-action>
      </common-scroll-view>
    </view>
    <view class="bottom-wrap">
      <view class="row" style="align-items: center;">
        <view class="select-all" @click="selectAll">
          <div v-if="isSelectAll" class="center">
            <up-icon name="checkmark-circle-fill" color="#79C435" size="46rpx"></up-icon>
          </div>
          <div v-else style="width: 42rpx;height: 42rpx; border: 1rpx solid #979797; border-radius: 50%;"></div>
          <text style="margin-left: 16rpx; font-size: 28rpx;">全选</text>
        </view>
        <text style="margin-left: 18rpx; font-size: 28rpx; color: #79C435;">预估价：</text>
        <text style="margin-left: 4rpx; font-size: 42rpx; color: #79C435;">{{ `¥${allPrice}` }}</text>
      </view>
      <view class="bottom-right" @click="accounts">
        <view>
          <up-text type="" color="#fff" size="48" :text="`结算(${selectNum})`"></up-text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getShoppingCart } from '@/services/shopCart';

export default {
  data() {
    return {
      dataList: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      isSelectAll: false,
      allPrice: '0.00',
      loading: false,
      selectNum: 0,
    }
  },
  watch: {
    dataList(newV) {
      if (newV?.length) {
        let check = true;
        let allPrice = 0;
        let selectNum = 0
        newV.forEach((item) => {
          const { num, price, select } = item || {};
          if (select) {
            allPrice += price * num;
            selectNum += num;
          } else {
            check = false;
          }
        });
        this.isSelectAll = check;
        this.allPrice = this.priceFormatPrice(allPrice);
        this.selectNum = selectNum;
      } else {
        this.isSelectAll = false;
        this.allPrice = this.priceFormatPrice(0);
        this.selectNum = 0;
      }
    },
  },
  methods: {
    valChange({ num, id }) {
      const item = this.dataList.find(item => item.id === id);
      item.num = num;
      this.dataList = JSON.parse(JSON.stringify(this.dataList));
    },
    deleteShopCart(id) {
      const idx = this.dataList.findIndex(item => item.id === id);
      this.dataList.splice(idx, 1);
      this.dataList = [...this.dataList];
    },
    selectProduct(id) {
      const item = this.dataList.find(item => item.id === id);
      item.select = !item.select;
      this.dataList = JSON.parse(JSON.stringify(this.dataList));
    },
    priceFormatPrice (price) {
      return uni.$u.priceFormat(price, '2', '.', ',');
    },
    async onRefreshBack(callback) {
      await this.onrefresh(1);
      callback();
    },
    async onrefresh(e) {
      console.log('onrefresh');
      const { dataList } = this;
      const _that = this;
      this.loading = true;
      const isSelectIds = new Set(dataList?.filter((item) => item.select).map((item) => item.id) || []);
      const res = await getShoppingCart();
      if (res.success) {
        _that.pageNum = 1;
        _that.dataList = res.data.map((item) => {
          if (isSelectIds.has(item.id)) {
            item.select = true;
          }
          return item;
        });
        _that.total = res.data.length;
        _that.pageSize = res.data.length;
      }
      _that.loading = false;
    },
    selectAll() {
      if (this.dataList?.length) {
        this.dataList.forEach((item) => {
          item.select = !this.isSelectAll;
        });
        this.dataList = [...this.dataList]
      }
    },
    getMore() {
      this.loading = false;
    },
    async accounts() {
      const modelRequestList = [];
      this.dataList.forEach((item) => {
        const { select, id, num } = item || {};
        if (select) {
          modelRequestList.push({
            detail: item,
            num,
          })
        }
      })
      if (modelRequestList?.length) {
        const _that = this;
        uni.navigateTo({
          url: `/pages/orderConfirmation/index`,
          success: (res) => {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('orderConfirmation', {
              data: modelRequestList,
            })
          }
        })
      } else {
        uni.showToast({
          title: '请选择结算的商品',
          icon: 'none'
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  flex: 1;
  height: 100vh;
  width: 100vw;
}
.refresh-view {
  width: 750rpx;
  height: 80px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.list{
  flex: 1;
  width: 750rpx;
}
.cell{
  width: 750rpx;
}
.bottom-wrap{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 128rpx;
  width: 100vw;
  justify-content: space-between;
  border-top: 1rpx solid #f2f2f2;
  .select-all {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 30rpx;
  }
  .bottom-right{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #79C435;
    height: 100%;
    width: 240rpx;
  }
}

.item{
  padding: 0 30rpx;
}
.center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.productItem{
  display: flex;
  flex-direction: row;
  padding: 30rpx;
}
</style>
